<template>
    <div class="monitor">
      <div class="container">
        <div class="column-title"><i class="left_line"></i>实时监测</div>
        <!--ehcarts图标区域-->
        <div class="data_observe">
          <div class="charts">
            <!--时间-->
            <div class="date">2020/09/09</div>
            <!--时间-->
            <!--图表区域左右均分-->
            <div class="chart_list">
              <!--空气温度，湿度-->
              <div class="chart">
                <div class="chart_left">
                  <div id="temperature" style="flex: 1;">
                  </div>
                  <div class="text">空气温度</div>
                </div>
                <div class="chart_right">
                  <div id="wet" style="flex: 1;">
                  </div>
                  <div class="text">空气湿度</div>

                </div>
              </div>
              <!--空气温度，湿度-->
              <!--PM2.5，风速-->
              <div class="chart">
                <div class="chart_left">
                  <div id="pm" style="flex: 1;">
                  </div>
                  <div class="text">PM2.5</div>
                </div>
                <div class="chart_right">
                  <div id="cloud" style="flex: 1;">
                  </div>
                  <div class="text">风速</div>
                </div>
              </div>
              <!--PM2.5，风速-->
              <!--风向，土壤湿度-->
              <div class="chart">
                <div class="chart_left">
                  <div id="direction" style="flex: 1;">
                  </div>
                  <div class="text">风向</div>
                </div>
                <div class="chart_right">
                  <div id="soil" style="flex: 1;">
                  </div>
                  <div class="text">土壤湿度</div>
                </div>
              </div>
              <!--风向，土壤湿度-->
              <!--光照-->
              <div class="chart">
                <div class="chart_left">
                  <div id="light" style="flex: 1;">
                  </div>
                  <div class="text">光照</div>
                </div>
                <div class="chart_right">

                </div>
              </div>
              <!--光照-->
            </div>
            <!--图表区域左右均分-->

          </div>

        </div>
        <!--ehcarts图标区域-->
      </div>
    </div>
</template>

<script>
  // 1. 导入 echarts
  import echarts from 'echarts'
  import util from '../../../common/util'
  export default {
    name: "DataObserve",
    data(){
      return{
        option1: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width:3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 40,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color:[[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}℃',
                fontSize: 12,
                offsetCenter: [5, "20%"],
              },
              data: [0]
            }
          ]
        },//空气温度传感器配置
        option2: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width:3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 100,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color:[[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}%',
                fontSize: 12,
                offsetCenter: [5, "20%"],
              },
              data: [20]
            }
          ]
        },//空气湿度传感器图表配置项
        option3: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width:3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 300,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color:[[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}μg/m³',
                fontSize: 12,
                offsetCenter: [5, "20%"],
              },
              data: [20]
            }
          ]
        },//PM2.5传感器器图表配置项
        option4: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width:3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 200,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color:[[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}km/h',
                fontSize: 12,
                offsetCenter: [5, "20%"],
              },
              data: [0]
            }
          ]
        },//风速传感器图表配置项
        option5: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              title: {
                offsetCenter: ["0", "20%"],
                fontSize: 11,
                color: "#5eda9c"
              },
              pointer: {
                width:3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 8,
              splitNumber: 8,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color:[[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              axisLabel: {
                fontSize: 10,
                formatter: function(v){
                  switch (v + '') {
                    case '1' : return '北';
                    case '2' : return '东北';
                    case '3' : return '东';
                    case '4' : return '东南';
                    case '5' : return '南';
                    case '6' : return '西南';
                    case '7' : return '西';
                    case '8' : return '西北';
                  }
                }
              },
              detail: {
                show: false
              },

              data: [],
            }
          ]
        },//风向传感器图表配置项
        option6: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width:3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 100,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color:[[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}%',
                fontSize: 12,
                offsetCenter: [5, "20%"],
              },
              data: [20]
            }
          ]
        },//土壤湿度传感器图表配置项
        option7: {
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              pointer: {
                width:3,
                length: "55%"
              },//设置指针粗细
              min: 0,
              max: 100,
              splitNumber: 4,
              startAngle: 252,
              endAngle: -27,
              radius: '90%',//控制圆圈大小
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  width: 2,
                  color:[[0.2, '#04bbdd'], [0.8, '#5eda9c'], [1, '#cccccc']],
                }
              },//控制外层环的宽度
              splitLine: {
                show: true,
                length: 5,//控制刻度的向内伸展长度
              },
              detail: {
                formatter: '{value}KLux',
                fontSize: 12,
                offsetCenter: [5, "20%"],
              },
              data: [20]
            }
          ]
        },//光照传感器图表配置项
      }
    },
    created(){ },
    mounted(){
      this.creatTemperature();
      this.creatWet();
      this.creatPm();
      this.creatCloud();
      this.creatDirection();
      this.creatSoil();
      this.creatLight();
    },
    methods:{
      creatTemperature(){
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id="+this.baseid+"&type=2",null,r=>{
          this.option1.series[0].data[0]=parseInt(r.data.sources);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('temperature'));
          myChart.setOption(this.option1);
        });

      },

      creatWet(){
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id="+util.storage.get('base_id')+"&type=3",null,r=>{
          this.option2.series[0].data[0]=parseInt(r.data.sources);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('wet'));
          myChart.setOption(this.option2);
        });

      },
      creatPm(){
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id="+util.storage.get('base_id')+"&type=7",null,r=>{
          this.option3.series[0].data[0]=r.data.sources;
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('pm'))
          myChart.setOption(this.option3);
        });
      },
      creatCloud(){
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id="+util.storage.get('base_id')+"&type=5",null,r=>{
          this.option4.series[0].data[0]=r.data.sources;
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('cloud'))
          myChart.setOption(this.option4);
        });
      },
      creatDirection(){
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id="+util.storage.get('base_id')+"&type=4",null,r=>{
          // console.log("风向:",r.data.sources);
          // console.log("风向:",typeof r.data.sources);
          switch(r.data.sources)
          {
            case '1':
              this.option5.series[0].data.push({value:1,name:'北'});
              break;
            case '2':
              this.option5.series[0].data.push({value:2,name:'东北'});
              break;
            case '3':
              this.option5.series[0].data.push({value:3,name:'东'});
              break;
            case '4':
              this.option5.series[0].data.push({value:4,name:'东南'});
              break;
            case '5':
              this.option5.series[0].data[0]={value:5,name:'南'};
              break;
            case '6':
              this.option5.series[0].data.push({value:6,name:'西南'});
              break;
            case '7':
              this.option5.series[0].data.push({value:7,name:'西'});
              break;
            default:this.option5.series[0].data.push({value:8,name:'西北'});
          }
          // console.log("this.option5",this.option5);
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('direction'));
          myChart.setOption(this.option5);
        });
      },
      creatSoil(){
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id="+util.storage.get('base_id')+"&type=6",null,r=>{
          // console.log('土壤湿度',parseFloat(r.data.sources)*100);
          this.option6.series[0].data[0]=parseFloat(r.data.sources)*100;
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('soil'));
          myChart.setOption(this.option6);
        });
      },
      creatLight(){
        this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id="+util.storage.get('base_id')+"&type=8",null,r=>{
          this.option7.series[0].data[0]=r.data.sources;
          // 3. 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('light'));
          myChart.setOption(this.option7);
        });

      },

    }
  }
</script>

<style scoped>
  .data_observe{
    height: 696px;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 10px;
  }
  .charts{
    height: 686px;
    width: 100%;
    background: white;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .date{
    font-size: 15px;
    color: #000000;
  }
  .chart_list{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .chart{
    flex: 1;
    display: flex;
    margin-bottom: 10px;
  }
  .chart_left{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .text{
    height: 25px;
    font-size: 15px;
    font-family: "Adobe 黑体 Std R";
    color: black;
    text-align: center;
  }
  .chart_right{
    flex: 1;
    display: flex;
    flex-direction: column;
  }


</style>
